<template>
    <div class="quotes-create">
        <el-form :model="form" ref="mform" :rules="rules" class="form mp-form"
                 :label-width="formLabelWidth" size="small">
            <el-form-item label="标签类型" prop="type">
                <el-radio-group v-model="form.type" :disabled="isView">
                    <el-radio label="EVALUATE">测评标签</el-radio>
                    <el-radio label="QUOTE">名言标签</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="标签名" prop="title">
                <el-input v-model="form.tag_name" autocomplete="off" style="width:280px;" :disabled="isView"></el-input>
            </el-form-item>
            <el-form-item v-if="isView">
                <el-button type="primary" @click="close()">确 定</el-button>
            </el-form-item>
            <el-form-item v-else>
                <el-button type="primary" @click="submit()">确 定</el-button>
                <el-button @click="close()">取 消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';

    export default {
        props: [ 'show', 'modId', 'isView' ],
        data() {
            return {
                formLabelWidth: '120px',
                // winName: '选择消息接收人',
                loading: false,
                form: {
                    type: 'EVALUATE',
                    tag_name: '',
                },
                rules: {
                    tag_name: [
                        { required: true, message: '请输入标签名', trigger: 'blur' }
                    ],
                },
            }
        },
        components: {

        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            this.init();
        },
        watch: {
            '$route' (to, from) {
                // this.groupId = this.$route.params.groupId;
                // this.refresh();
            },
            'show'(val) {
                if(val) {
                    this.init();
                }
            },
        },
        filters: {
            adminTypeLabel( type ) {
                if( type == 'SUPER') {
                    return '超级管理员';
                } else if(type == '_SUPER') {
                    return '系统管理员';
                } else {
                    return '管理员';
                }
            }
        },
        computed: {
            ...mapState([
                'loginUser',
            ]),
        },
        methods: {
            ...mapActions([
            ]),
            async init() {

                this.form.type = "EVALUATE";
                this.form.tag_name = "";

                this.$refs.mform && this.$refs.mform.resetFields();

                if(this.modId) {
                    let data = await this.$japi.tag.getTag(this.modId);
                    if(data) this.form = data;
                } else {
                    this.form = {
                        type: 'EVALUATE',
                        tag_name: '',
                    };
                }
            },
            submit() {
                this.$refs.mform.validate((valid) => {
                    if (valid) {
                        this._submit();
                    } else {
                        return false;
                    }
                });
            },
            async _submit() {
                let ret = null;

                this.loading = true;

                if(this.modId) {
                    ret = await this.$japi.tag.update(this.form);
                } else {
                    ret = await this.$japi.tag.create(this.form);
                }

                this.loading = false;

                if(ret) {
                    this.close(true);
                    this.$message('操作成功！');
                }
            },
            close(flag) {
                this.$emit('close', flag);
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .quotes-create {
        display:flex;
        justify-content: space-around;
        /*min-width: 800px;*/

        .form {
            /*width:500px;*/
            width:100%;
        }
        .preview-wrap {
            width:380px;
            height:500px;
            overflow: hidden;
            padding:5px;
        }
        .preview {
            position: absolute;
            top:-10px;
            right:0px;
            width:375px;
            height:667px;
            background: #FFF;
            box-shadow: 0 0 5px #CCC;
            transform: scale(0.8);
            /*transform-origin:100% 0;*/

            .bg {
                background: #666;
                background-size: cover;
                background-position: center;
            }
            .pa {
                position: absolute;
            }
            .txt {
                color: #FFF;
                width: 100%;
                text-align: center;
            }
            .time {
                border: 1px solid #FFF;
            }
            .time-sep {
                border-top: 1px solid #FFF;
            }
            .avatar {
                border-radius: 50%;
                overflow: hidden;
                transform: scale(1);

                img {
                    width:100%;
                }
            }
            .qrcode {
                img {
                    width:100%;
                }
            }
            .name {
                color: #333;
            }
            .title {
                color: #2BA245;
            }
            .sub-title {
                color: #999;
            }
            .txt-wisdom {
                width: 100%;
                text-align: center;
                color: #FFF;
                /*left: 50%;
                transform: translateX(-50%);*/
            }
            .author-sep {
                border-top: 1px solid #FFF;
            }
        }
    }
</style>
